<template>
  <div class="padding-lr">
    <div class="text-right">
      <el-button type="success" size="mini" @click="save">
        保存
      </el-button>
    </div>

    <template v-for="(item, index) in tableData">
      <el-row :gutter="10" :key="index" class="margin-top">
        <el-col :span="4">{{ item.name }}:</el-col>
        <el-col :span="20" v-if="contentId.length>0">
          <el-select
            v-model="contentId[index].value"
            multiple
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="(item1, key) in contentData[item.id]"
              :key="key"
              :label="item1.requirementContent"
              :value="item1.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </template>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import { closeDialog } from "@/utils";
import Row from "../../../../yg/layout/main/page/wrapper/form/Row";

export default {
  components: { Row },
  data() {
    return {
      tableData: [],
      contentData: {},
      options: [],
      contentId:[],
      customerId:"",
      arr1:[],
      saveData:[],
      r_list:[],
      test_list:[],
      returnData:[],
      customerTypeId:"",
    };
  },
  mounted() {
    var title;
    title = this.$store.state.edit.row.data2;
    console.log("111")
    this.customerId =this.$store.state.edit.id;
    for(var key in title){
      this.tableData.push({id:key,name:title[key]})
    }
    console.log(this.tableData)
    this.contentData = this.$store.state.edit.row.data3;
    for (var i = 0; i < this.tableData.length; i++) {
      var item = {value: ''};
      this.contentId.push(item);
    }
    console.log("contentData",this.contentData)
    this.tableData.forEach((item,index)=>{
      var id = item.id
      //   idsArr为要获取的ids的数组
      var idsArr = this.contentId[index].value
      console.log("idsArr:",idsArr)
    })
     this.showBack()
  },
  methods: {
    showBack() {
      this.returnData = this.$store.state.edit.row.data
      console.log("return",this.returnData);
      if (this.returnData != null) {
      console.log("return:", this.returnData);
      this.customerTypeId = this.$store.state.edit.row.data4
        for (var key in this.returnData[0].requirementList) {
          this.r_list.push({
            id: key,
            ids: this.returnData[0].requirementList[key]
          })
          this.test_list.push(key)
        }
        this.contentId = []
        console.log("r_list1", this.r_list)
        setTimeout(() => {
          this.tableData.forEach(item => {
              let c = this.test_list.indexOf(item.id)
              if (c != -1) {
                this.contentId.push({value: this.r_list[c].ids})
              } else {
                this.contentId.push({value: []})
              }
            },
          )
        })
      }
    },

    async save() {
      const params = {};
      for(const item in this.contentId){
        const labelConsArray = new Array();
        for(const index in this.contentId[item].value){
          labelConsArray.push(this.contentId[item].value[index]);
        }
        console.log("save:",this.tableData[item])
        if (this.tableData[item]!=null){
          params[this.tableData[item].id] = labelConsArray;
        }
      }
      let param={};
        param.id= this.customerTypeId;
      param.requirementList=params;
      param.customerId=this.customerId;
      this.loading = true;
      console.log(param)
      const { code, message } = await ajax("saveCustomerRelationRequirement", param);
      this.loading = false;
      if (code === 200) {
        this.$message({
          type: "success",
          message: "保存成功"
        });
        closeDialog();
      } else {
        this.$message({
          type: "error",
          message: message
        });
        closeDialog();
      }
    }
  }
};
</script>

<style scoped>
/deep/ .el-select {
  width: 100%;
}
.btn-group {
  float: right;
}
</style>
